<template>
	<view class="content">
		<view style="width: 100vw;overflow: hidden;">
			<l-painter 
			  isCanvasToTempFilePath
			  @success="path = $event"
			  hidden
			  css="padding:40rpx; background: #fff;box-sizing: border-box;width:100vw;">
			   
			  <l-painter-text :text="today" css="display:block; color: #000; font-size: 32rpx; height:40rpx;line-height:40rpx;margin-bottom:20rpx;"/>
			  
			  <l-painter-view >
				  <l-painter-view css="box-sizing: border-box;width:100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;flex-wrap: nowrap;">
				  				 <l-painter-text text="名称" css="width:40%;text-align:left;fontWeight: bold;color:#999;height:40rpx;line-height:40rpx;" />
				  				 <l-painter-text text="数量" css="width:20%;text-align:center;fontWeight: bold;color:#999;height:40rpx;line-height:40rpx;" />
				  				 <l-painter-text text="单价" css="width:20%;text-align:center;fontWeight: bold;color:#999;height:40rpx;line-height:40rpx;" />
				  				 <l-painter-text text="金额" css="width:20%;text-align:right;fontWeight: bold;color:#999;height:40rpx;line-height:40rpx;" />
				  </l-painter-view>
				  <l-painter-view css="box-sizing: border-box;width:100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;flex-wrap: nowrap;" v-for="(item,index) in tableList" :key="index">
				  				 <l-painter-text :text="item.productName||' '" css="width:40%;text-align:left;min-height:40rpx;line-height:40rpx;" />
				  				 <l-painter-text :text="item.amount|| 0" css="width:20%;text-align:center;height:40rpx;line-height:40rpx;" />
				  				 <l-painter-text :text="item.unitPrice?'¥'+ item.unitPrice:0" css="width:20%;text-align:center;height:40rpx;line-height:40rpx;" />
				  				 <l-painter-text :text="item.totalPrice?'¥'+item.totalPrice:0" css="width:20%;text-align:right;height:40rpx;line-height:40rpx;" />
				  </l-painter-view>
			  </l-painter-view>
			 
			  
			  
			  <l-painter-view css="box-sizing: border-box;width:100%;border-bottom:2rpx dotted #ccc;margin:20rpx 0;" >
			  </l-painter-view>
			  
			  <l-painter-view>
				  <l-painter-text text="总数量" css="width:70%;text-align:left;height:40rpx;line-height:40rpx;" />
				  <l-painter-text :text="totalQuantity" css="width:30%;text-align:right;height:40rpx;line-height:40rpx;" />
			  </l-painter-view>
			  <l-painter-view>
				  <l-painter-text text="总金额" css="width:70%;text-align:left;height:40rpx;line-height:40rpx;" />
				  <l-painter-text :text="'¥'+totalPrice" css="width:30%;text-align:right;color:#f00;height:40rpx;line-height:40rpx;" />
			  </l-painter-view>
			  <l-painter-view css="margin-top:20rpx;">
				  <l-painter-text :text="'备注 : '+remark.substring(0,500)" css="width:100%;text-align:left;line-height:40rpx;" />
				 
			  </l-painter-view>
			</l-painter>
		 </view>
		<view class="date">{{today}}</view>
		<view class="j-table">
			<view class="f-r-b th" style="color: #999;">
				<view class="tr tr1">名称</view>
				<view class="tr tr3">数量</view>
				<view class="tr tr4">单价</view>
				<view class="tr tr5">金额</view>
			</view>
			<view class="f-r-b th" v-for="(item,index) in tableList" :key="index">

				<view class="tr tr1">
					<text class="ellipsis">{{item.productName}}</text>
				</view>
				<view class="tr tr3">
					<text>{{item.amount||0}}</text>
				</view>
				<view class="tr tr4">
					<text>¥{{item.unitPrice||0}}</text>
				</view>

				<view class="tr tr5">
					<text>¥{{item.totalPrice||0}}</text>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="sum f-r-b">
			<text>总数量</text>
			<text>{{totalQuantity}}</text>
		</view>
		<view class="sum f-r-b">
			<text>总金额</text>
			<text :style="{'color':themeColor}">¥{{totalPrice}}</text>
		</view>
		<view class="textarea" style="margin-bottom: 200rpx;">
			<textarea v-model="remark" :maxlength="500" class="input"  auto-height placeholder-style="color:#999" placeholder="请输入备注" />
            
		</view>
		<!-- <view class="f-r-e" style="margin-bottom: 200rpx;color: #eee;">{{remark.length}}/500</view> -->
		<view class="submit bggradient f-r-c" @click="GeneratePoster">生成照片</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path:'',
				remark:'',
				tableList: [],



			}
		},
		computed: {
		  themeColor() {
		    return this.$themeColor;
		  },
		  today(){
			  return this.$getToday();
		  },
		  total(){
			  this.tableList.forEach((item)=>{
			  			 if(item.amount&&item.amount!=''&&item.amount>0){
			  				 item.amount=Number(item.amount);
			  			 }
			  			 else{
			  				 item.amount=null;
			  				 
			  			 }
			  			 if(item.unitPrice&&item.unitPrice!=''&&item.unitPrice>0){
			  			 	 item.unitPrice=Number(item.unitPrice);
			  			 }else{
			  			 	 item.unitPrice=null;
			  				 
			  			 }
						 if(item.amount&&item.unitPrice){
							item.totalPrice=item.amount * item.unitPrice;
						 }else{
							 item.totalPrice=0;
						 }
						 
			  })
			  console.log(this.tableList);
		  },
		  totalQuantity(){
			  return this.tableList.reduce((total, item) => total + item.amount, 0);
		  },
		   // 计算总价
		  totalPrice() {
			 return this.tableList.reduce((total, item) => total + item.totalPrice, 0);
		  }
		},
        onShow() {
        	this.getList();
        },
		methods: {
			getList(){
				let opts={
				    url:'/authMarket/getDetailList',
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{ this.tableList=res.data;})
			},
			//生成图片
			GeneratePoster(){
				
				if(!this.path||this.path==undefined){
					return false;
				}
				let url=this.path;
				let list=[];
				list.push(url);
				let that=this;
				uni.previewImage({
					 urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了       
					 success: function(res) { 
						 
					 }
					
				 })
			
				
			},


		},

	}
</script>
<style scoped lang="less">
	.content {
		.date {
			color: #999;
			margin-bottom: 24rpx;
		}

		.j-table {
			background: #fff;
			overflow: hidden;

			.th {
				height: 60rpx;
				flex-wrap: nowrap;

				.tr {
					height: 100%;
					// width: 100rpx;
					flex: 1;
					// width: calc((100vw - 440rpx)/2);
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					// border-right: 1rpx #eee solid;
					// border-bottom: 1rpx #eee solid;
					text {
						height: 40rpx;
						line-height: 40rpx;
						width: 100%;
						// width: calc(100% - 20rpx);
						overflow: hidden;
						// background: #ccc;
						text-align: center;
					}

				}

				.tr1 {
					justify-content: flex-start;
					text-align: left;
					min-width: 220rpx;
					max-width: 220rpx;
					padding: 0;

					text {
						text-align: left;
					}
				}

				.tr5 {
					justify-content: flex-end;
					text-align: right;
					min-width: 180rpx;
					max-width: 180rpx;
					padding: 0;

					text {
						text-align: right;
					}
				}
			}

		}

		.line {
			border-bottom: 1rpx #ccc dashed;
			width: 100%;
			height: 1rpx;
			margin: 30rpx 0;
		}

		.sum {
			height: 60rpx;

		}

		.textarea {
			min-height: 200rpx;
			background: #eee;
			padding: 16rpx;
			border-radius: 10rpx;
			margin: 20rpx 0;

			.input {
				width: 100%;

			}
		}

		.submit {
			width: 300rpx;
			height: 80rpx;
			position: fixed;
			z-index: 20;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50rpx;
			color: #fff;
		}
	}
</style>